<template>
  <div class="order-list">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-if="orderList.length > 0"
        v-model="loading"
        :finished="finished"
        finished-text="--- 全部加载完毕 ---"
        @load="onLoad"
      >

        <van-cell-group inset v-for="(item,index) in orderList" :key="index">
          <!--<van-cell :title="item.goods[0].product.name"/>-->
          <van-cell class="order-status" :value="orderStatus(item.order_status)"></van-cell>
          <router-link :to="{name:'order-details',params:{id:item.id}}">
            <!-- 商品 -->
            <van-cell class="goods" v-for="(goods,i) in item.goods" :key="i">
              <template #icon>
                <img class="icon" :src="'https://files.roborock.com/uploadImages/'+goods.product.default_photo" alt="">
              </template>
              <template #title>
                <div class="title">{{ goods.product.name }}</div>
                <div class="desc">{{ goods.product_price }}</div>
              </template>
              <template>
                x{{ goods.total_amount }}
              </template>
            </van-cell>
          </router-link>
          <!-- 订单信息 -->
          <van-cell class="order-data">
            <div>订单编号:{{ item.sn }}</div>
            <div>{{ item.created_at }}</div>
          </van-cell>
          <!-- 操作 -->
          <van-cell class="operate">
            <div class="price">{{ item.goods_count }}件商品，共计{{ item.goods_amount }}元</div>
            <div v-if="item.order_status===0">
              <span @click.stop="cancelOrder(item.id,item.goods_amount)">取消订单</span>
              <router-link to="">付款</router-link>
            </div>
          </van-cell>
        </van-cell-group>
      </van-list>
      <van-empty
        v-else
        class="custom-image"
        image="https://files.roborock.com/mini_img/profile/empty-order.png"
        description="您的订单中没有内容"
      />
    </van-pull-refresh>
  </div>
</template>

<script>
import {Dialog, Toast} from "vant";

export default {
  name: "OrderList",
  props: {
    type: Number
  },
  data() {
    return {
      orderList: [],
      // 是否处于加载状态，加载过程中不触发load事件
      loading: false,
      // 是否已加载完成，加载完成后不再触发load事件
      finished: false,
      // 刷新状态
      refreshing: false,
      total: 0,
      page: 1,
    }
  },
// 侦听器
  watch: {},
// 计算属性
  computed: {},
// 事件
  methods: {
    price(price) {
      let data = price
      return parseInt(data);
    },
    orderStatus(status) {
      switch (status) {
        case 0:
          return '待付款';
        case 2:
        case 3:
          return '已取消';
        default:
          return '未知状态';
      }
    },
    async onLoad() {
      this.page++;
      this.loading = true;
      await this.getList(this.page);
      // this.loading = false;
    },
    async onRefresh() {
      this.orderList = [];
      this.loading = true;
      this.finished = false;
      this.refreshing = true;
      await this.getList();
      this.refreshing = false;
      this.loading = false;
    },
    getAfterSalesList() {
      this.$ajax.afterSalesList().then(res => {
        if (res.error_code === 0) {
          this.orderList = res.refund_list
        } else {
          this.$toast(res.error_desc)
        }
      })
    },
    getList(page = 1) {
      let data = {
        is_from: "mini",
        page,
        per_page: 10,
        // status: "0"  // 0: 待付款, 2: 待收货
      }
      // console.log(data)
      switch (this.type) {
        case 0:
          break;
        case 1:
          data.status = "0";
          break;
        case 2:
          data.status = "2";
          break;
        case 3:
          this.getAfterSalesList()
          return;
        default:
          return
      }
      this.$ajax.orderList(data).then(res => {
        if (res.error_code === 0) {
          this.orderList.push(...res.orders)
          // console.log(this.orderList.length, res.paged.total)
          if (this.orderList.length >= res.paged.total) {
            this.finished = true
          }
          this.total = res.paged.total
          // console.log(res);
        } else {
          this.$toast(res.error_desc)
        }
      });
    },
    // 取消订单
    cancelOrder(id, price) {
      // console.log(id, price)
      Dialog.confirm({
        title: '提示',
        message: '是否取消选中订单',
      }).then(() => {
        //订单已取消
        this.$ajax.cancelOrder({
          order: id,
          reason: 1,
          separate: parseInt(price)
        }).then(res => {
          if (res.error_code === 0) {
            Toast.success('订单已取消');
          } else {
            this.$toast(res.error_desc)
          }
          // this.getList(this.page)
        });
      })
    },
  },
// 生命周期
  created() {
  },
  mounted() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.order-list {
  width: 100%;
  background-color: #f5f5f5;

  ::v-deep.van-empty__image {
    margin-top: 180px;
    width: 75px;
    height: 75px;
  }

  ::v-deep.van-cell-group {
    margin-bottom: 15px;
    border-radius: 14px;
    box-shadow: 2px 2px 10px 2px rgb(0 0 0 / 5%), 2px 2px 10px 2px rgb(0 0 0 / 5%);

    // 订单状态
    .order-status {
      justify-content: flex-end;
      padding: 8px 16px;

      .van-cell__value {
        color: #9b9b9b;
        font-size: 14px;
      }
    }

    .van-cell__value {
      flex: 0 1 auto;
    }

    // 商品
    .goods {
      align-items: center;

      .icon {
        width: 80px;
        height: 58px;
      }

      .van-cell__title {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 80px;
        box-sizing: border-box;
        margin-right: 5px;
        overflow: hidden;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        margin-left: 10px;
      }

      .van-cell__value {
        flex: 0 1 auto;
      }
    }

    // 订单信息
    .order-data .van-cell__value {
      margin-left: 90px;
      color: #9b9b9b;
      font-size: 12px;
      font-weight: 400;
      text-align: left;
    }

    // 操作
    .operate {
      justify-content: flex-end;
      padding: 0px 16px;

      .price {
        color: #9b9b9b;
        font-size: 12px;
        font-weight: 400;
        text-align: right;
        line-height: 38px;
        clear: both;
      }

      span {
        display: inline-block;
        width: 86px;
        height: 30px;
        margin-left: 8px;
        margin-bottom: 10px;
        overflow: hidden;
        color: #4a4a4a;
        font-size: 14px;
        font-weight: 400;
        text-align: center;
        line-height: 30px;
        border-radius: 30px;
        border: 1px solid rgba(0, 0, 0, .1);
      }

      a {
        display: inline-block;
        width: 86px;
        height: 30px;
        margin-left: 8px;
        margin-bottom: 10px;
        overflow: hidden;
        font-size: 14px;
        font-weight: 400;
        text-align: center;
        line-height: 30px;
        border-radius: 30px;
        background: #f2f1f6;
        color: #007aff;
        border: none;
      }


    }
  }

}
</style>